<template>
  <!-- 新增/修改 -->
  <el-dialog
    v-model="dialogVisible"
    :title="formData.id === undefined ? '新增消息' : '修改消息'"
    @closed="closedDialog"
    width="80%"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      label-position="right"
      v-loading="formLoading"
    >
      <el-form-item label="消息标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入消息标题" />
      </el-form-item>
      <el-form-item label="消息类型" prop="type">
        <el-select
          v-model="formData.type"
          placeholder="请选择"
          style="width: 100px"
          clearable
        >
          <el-option
            v-for="item in MESSAGE_NOTICE_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="消息内容" prop="content">
        <WangEditor v-model="formData.content" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="closedDialog">取消</el-button>
      <el-button
        type="primary"
        @click="handleCreateOrUpdate"
        :loading="loading"
      >
        确认
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount } from "vue";
import MessageAPI, { type MessageVO } from "@/api/system/base/message";
import { type FormInstance, type FormRules } from "element-plus";
import { cloneDeep } from "lodash-es";
import WangEditor from "@/components/WangEditor/index.vue";
import { MESSAGE_NOTICE_TYPE } from "@/enums/GlobalConst";
/**
 * 消息编辑详情页面
 */
defineOptions({
  name: "EditMessageDetailsDialog",
});
const props = defineProps({
  messageId: {
    type: Number,
    required: false,
  },
  closedDialog: {
    type: Function,
    required: true,
  },
});

/** 表单初始化 */
const DEFAULT_FORM_DATA: MessageVO = {
  id: props.messageId,
  /** 消息标题 */
  title: undefined,
  /** 消息内容 */
  content: undefined,
};
/** 表单对象 */
const formData = ref<MessageVO>(cloneDeep(DEFAULT_FORM_DATA));
const formRef = ref<FormInstance | null>(null);
/** 表单校验格式 */
const formRules: FormRules<any> = {
  title: [
    { required: true, message: "请输入消息标题", trigger: "blur" },
    { min: 1, max: 36, message: "长度在36以内个字符", trigger: "blur" },
  ],
  content: [
    { required: true, message: "请输入消息内容", trigger: "blur" },
    { min: 1, max: 1024, message: "长度在1024以内个字符", trigger: "blur" },
  ],
};

const dialogVisible = ref<boolean>(true);
const loading = ref<boolean>(false);
const formLoading = ref<boolean>(false);

/** 新增或者更新 */
const handleCreateOrUpdate = () => {
  formRef.value?.validate((valid: boolean, fields) => {
    if (!valid) return console.error("表单校验不通过", fields);

    loading.value = true;
    if (formData.value.id === undefined) {
      // 新增
      MessageAPI.addBaseMessageApi(formData.value)
        .then(() => {
          ElMessage.success("操作成功");
        })
        .finally(() => {
          loading.value = false;
          props.closedDialog(true);
        });
    } else {
      // 更新
      MessageAPI.putBaseMessageApi(formData.value.id, formData.value)
        .then(() => {
          ElMessage.success("操作成功");
        })
        .finally(() => {
          loading.value = false;
          props.closedDialog(true);
        });
    }
  });
};

/** 关闭弹窗 */
const closedDialog = () => {
  props.closedDialog(false);
};

/** 页面渲染完成后初始化 */
onBeforeMount(async () => {
  if (props.messageId) {
    formLoading.value = true;
    MessageAPI.getBaseMessageApi(props.messageId)
      .then((res) => {
        const { data } = res;
        formData.value = data;
      })
      .finally(() => {
        formLoading.value = false;
      });
  }
});
</script>

<style lang="scss" scoped></style>
